<template>
  <el-card>
    <el-alert
      title="添加商品信息"
      type="info"
      :closable="false"
      center
      show-icon
      style="margin-bottom: 20px"
    />

    <el-steps :active="active" finish-status="success" :space="200" align-center>
      <el-step title="基本信息" />
      <el-step title="商品参数" />
      <el-step title="商品属性" />
      <el-step title="商品图片" />
      <el-step title="商品内容" />
      <el-step title="完成" />
    </el-steps>

    <el-tabs :value="active+''" :before-leave="beforeLeave" tab-position="left" style="margin-top: 40px">
      <el-tab-pane label="基本信息">
        <goods-info ref="goodsInfo" :goods-info="goodsInfo" />
      </el-tab-pane>
      <el-tab-pane label="商品参数">
        <params-item v-for="item in params" :key="item.attr_id" :item="item" @change="setAttr($event,item.attr_id)" />
      </el-tab-pane>
      <el-tab-pane label="商品属性">
        <goods-attributes v-model="attrs" />
      </el-tab-pane>
      <el-tab-pane label="商品图片">
        <upload-image @on-success="onSuccess" />
      </el-tab-pane>
      <el-tab-pane label="商品内容" />
      <el-tab-pane label="完成" />
    </el-tabs>

  </el-card>
</template>

<script>
import GoodsInfo from '@/views/Goods/AddGoods/components/GoodsInfo'
import { loadParamsList } from '@/api/parameter'
import UploadImage from '@/views/Goods/AddGoods/components/UploadImage'
import ParamsItem from '@/views/Goods/AddGoods/components/ParamsItem'
import GoodsAttributes from '@/views/Goods/AddGoods/components/GoodsAttributes'
export default {
  name: 'IndexVue',
  components: { GoodsAttributes, ParamsItem, UploadImage, GoodsInfo },
  data() {
    return {
      active: 0,
      goodsInfo: {
        goods_name: '',
        goods_weight: '',
        goods_price: '',
        goods_number: '',
        goods_cat: '',
        goods_introduce: '',
        pics: [],
        attrs: []
      },
      params: [],
      attrs: []
    }
  },
  methods: {
    // 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。
    async beforeLeave(activeName) {
      if (activeName === '0') return true
      await this.$refs.goodsInfo.formValidation()
      this.active = activeName - 0
      if (this.active === 1) {
        this.loadParams('many')
      }
      if (this.active === 2) {
        this.loadParams('only')
      }
      return true
    },
    async loadParams(type) {
      const pId = this.goodsInfo.goods_cat[this.goodsInfo.goods_cat.length - 1]
      const res = await loadParamsList(pId, type)
      if (type === 'many') {
        if (res) {
          this.params = res.forEach(item => {
            if (item.attr_vals !== '') {
              item.attr_vals = item.attr_vals.split(',')
            }
          })
        }
        this.params = res
      } else {
        this.attrs = res
      }
    },
    setAttr(e, id) {
      const item = {
        attr_id: id,
        attr_value: e
      }
      const index = this.goodsInfo.attrs.findIndex(item => {
        return item.attr_id === id
      })
      if (index === -1) {
        this.goodsInfo.attrs.push(item)
      } else {
        this.goodsInfo.attrs.splice(index, 1, item)
      }
    },
    // 上传图片
    onSuccess(fl) {
      const arr = fl.map(item => {
        return { pic: item.tmp_path }
      })
      this.goodsInfo.pics = arr
    }
  }
}
</script>

<style scoped>

</style>
